<template>
	<view class="content">
		<view class="nav-top">
			<uni-search :show="true" @confirm="search"></uni-search>
			<view class="nav-classify">
			    <view v-for="tab in tabBars" :key="tab.id" :data-order="tab.id" class="uni-tab-item" :id="tab.id" @click="ontabtap">
			        <text class="uni-tab-item-title" :class="tabOrder==tab.id ? 'uni-tab-item-title-active' : ''">
						{{tab.name}}
					</text>
			    </view>
				<view class="uni-tab-item" @click="ontabtap" data-order="minprice">
					<view class="uni-tab-item-title">
						<text :class="tabOrder=='minprice' ? 'uni-tab-item-title-active' : ''">
							价格
						</text>
						<image class="image-price" mode="widthFix" :src="'../../static/image/icon/listsort'+ listorder + '.png'" />
					</view>
				</view>
				<view class="uni-tab-item" data-order="filter" @click="showFilter">
					<text class="uni-tab-item-title">
						筛选
						<text class="uni-text-small icon iconfont icon-filter"></text>
					</text>
				</view>
			</view>
		</view>
		<view class="product-list">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="value.cover"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{ value.title }}</view>
							<view class="uni-media-list-text-bottom">
								<text>{{ value.author_name }}</text>
								<text>{{ value.published_at }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"  :icon-size="16" :content-text="contentText" />
		</view>
		<view class="filter-content" :class="filterFlag?'on':''">
			<view class="filter-item">
				<text class="filter-text">
					出游天数(多选)
				</text>
				<view class="days">
					<view class="days-item filter-on"  v-for="item,index in filterDays" :key = "index">
						{{item}} 天
					</view>
				</view>
			</view>
			<view class="filter-item">
				<text class="filter-text">
					价格预算
				</text>
				<view class="days">
					<view class="days-item" v-for="item,index in budgets" :key="index">
						{{item}}
					</view>
				</view>
				<!-- <view>
					最低价----最高价
				</view> -->
			</view>
			<view class="filter-item">
				<text class="filter-text">
					热门搜索
				</text>
				<view class="days">
					<view class="days-item" v-for="item,index in hotItems" :key = "index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="filter-item btns">
				<view class="btn-item">
					重置
				</view>
				<view class="btn-item btn-submit" @click="filterSubmit">
					确定
				</view>
			</view>
		</view>
		
		<view class="uni-mask" @click="showFilter" :class="{show:maskshow}"></view>
	</view>
</template>

<script>
	import uniSearch from "@/components/search/search.vue";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	var dateUtils = require('@/common/js/util.js').dateUtils;
	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;
	export default {
		components:{
			uniSearch,
			uniIcons
		},
		data() {
			return {
				filterBtns:{
					
				},
				listQuery:{},
				maskshow:false,
				filterDays:[6,7,8,9],
				budgets:['0-3000','3000-5000','5000-10000','10000以上'],
				hotItems:['漂流','方特','水上乐园','欧乐堡济南','温泉','济南动物园','动物园','南部山区','台儿庄'],
				params:{
					// 查询条件
				},
				filterFlag:false,
				listorder:'',
				last_id: '',
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				listData:[],
				isup:true,
				newsObj: {
					"multiple":{
						data:[]
					},
					"sales":{
						data:[]
					},
					"newp":{
						data:[]
					},
					"minprice":{
						data:[]
					},
					"filter":{
						data:[]
					}
				},
				cacheTab: [],
				scrollInto: "",
				tabOrder: "",
				tabBars: [{
				    name: '综合',
				    id: 'multiple'
				}, {
				    name: '销量',
				    id: 'sales'
				}, {
				    name: '新品',
				    id: 'newp'
				}
				]
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.last_id = '';
			this.getList();
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},500)
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			getList(){
				var data = {
					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				if (this.last_id) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.minId = this.last_id;
					data.time = new Date().getTime() + '';
					data.pageSize = 10;
				}
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news',
					data: data,
					success: data => {
						if (data.statusCode == 200) {
							let list = this.setTime(data.data);
							this.listData = this.reload ? list : this.listData.concat(list);
							this.last_id = list[list.length - 1].id;
							this.reload = false;
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			setTime(items) {
				var newItems = [];
				items.forEach(e => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: dateUtils.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			},
			ontabtap(e) {
				let selorder = (e.target.dataset.hasOwnProperty('order'))?(e.target.dataset.order):(e.currentTarget.dataset.order);
				
				this.switchTab(selorder);
			},
			switchTab(order) {
				// this.params.order = order;
				if(order == 'minprice'){
					this.listorder = 'asc' == this.listorder?'desc':'asc';
					// this.params.orderby = this.listorder;
				}else{
					this.listorder = '';
				}
			    if (this.newsObj[order].data.length === 0) {
			        // this.getList(order);
			    }
			    if (this.tabOrder === order) {
			        return;
			    }
				 this.tabOrder = order;
			},
			
			goDetail(){
				// 前往详情页
				uni.navigateTo({
					url:'/pages/classify/detail?id=1'
				})
			},
			showFilter(){
				// 显示过滤窗
				this.filterFlag = !this.filterFlag;
				this.maskshow = !this.maskshow;
			},
			filterSubmit(){
				// console.log('过滤')
			}
		}
	}
</script>

<style>
	.nav-top{
		position: fixed;
		top:  var(--window-top);
		z-index: 13;
		width: 100%;
		background-color: #fff;
	}
	
	.product-list{
		margin-top: 190rpx;
	}
	
	.nav-classify {
		width: 100%;
        height: 80rpx;
		display: flex;
        flex-direction: row;
		justify-content: space-around;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
        /* flex-wrap: nowrap; */
        border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px;
    }
    
	.uni-tab-item {
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
        padding-left: 34rpx;
        padding-right: 34rpx;
    }

    .uni-tab-item-title {
        color: #555;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .uni-tab-item-title-active {
        color: #fc901e;
    }
	
	.uni-text-small{
		font-size: 24rpx !important;
	}
	
	.image-price{
		vertical-align: text-top;
		height: 36rpx;
		width: 36rpx;
	}

	/* .loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

    .loading-text {
        margin-left: 2px;
        font-size: 16px;
        color: #999999;
    } */

	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	/* 过滤选择框 */
	.filter-content{
		background-color: #fff;
		width: 100%;
		z-index: 12;/* 高于mask的index值 */
		position: fixed;
		top:calc(186rpx + var(--window-top));
		left: 0;
		opacity: 0;
		transition-property: height,opacity,transform,-webkit-transform;
		transition-duration: 300ms;
		transform: translate3d(0px,-100%,0px) scaleY(0);
	}
	
	.filter-content.on{
		transition-duration: 0.3s;
		opacity: 1;
		height: auto;
		transform: translate3d(0px,0px,0px) scaleY(1);
	}
	
	.filter-item{
		margin-top: 20rpx;
		padding: 0 10rpx;
	}
	
	.filter-item.btns{
		margin-top: 80rpx;
		padding:0;
	}
	
	.filter-text{
		color: #888;
		padding-left: 15rpx;
	}
	
	.days{
		text-align: left;
	}
	
	.days-item{
		border: 1px solid #999;
		padding: 5rpx;
		width: 140rpx;
		border-radius: 10rpx;
		display: inline-block;
		text-align: center;
		margin: 10rpx;
		font-size: 24rpx;
		/* box-shadow: 2rpx 2rpx 2rpx #2C405A; */
	}
	
	.budget-item{
		border: 1px solid #999;
		padding: 5rpx;
		width: 140rpx;
		border-radius: 10rpx;
		display: inline-block;
		text-align: center;
		margin: 10rpx;
		font-size: 24rpx;
	}
	.btn-item{
		border-top: 1px solid #999;
		padding: 10rpx 0;
		display: inline-block;
		width: 50%;
		text-align: center;
		color: #808080;
	}
	.btn-submit{
		background: #ef791d;
		color: #fff;
	}
	.show{
		display: block;
	}
	.filter-on{
		border: 1px solid #4cd964;
		color: #4cd964;
	}
</style>
